<script setup>
	import CloseImg from "../../assets/img/close.png"
	import SelectImg from "../../assets/img/select.png"
	const tableData = [
		{
			baseFun: "空间席位",
			free: "1人",
			person: "1人",
			term: "50人",
			enterprise: "100人",
		},
		{
			baseFun: "创建标签数",
			free: "100",
			person: "500",
			term: "1000",
			enterprise: "不限",
		},
		{
			baseFun: "创建规范数",
			free: "20",
			person: "100",
			term: "500",
			enterprise: "不限",
		},
		{
			baseFun: "规范pdf解析录入",
			free: "Tom",
			person: "person",
			term: "false",
			enterprise: "person",
		},
		{
			baseFun: "AI知识问答",
			free: "Tom",
			person: "false",
			term: "person",
			enterprise: "person",
		},
		{
			baseFun: "高级搜索",
			free: "Tom",
			person: "person",
			term: "true",
			enterprise: "person",
		},
		{
			baseFun: "分享标签",
			free: "Tom",
			person: "false",
			term: "true",
			enterprise: "person",
		},
		{
			baseFun: "分享规范",
			free: "true",
			person: "false",
			term: "person",
			enterprise: "true",
		},
		{
			baseFun: "Word/Excel打印模板",
			free: "false",
			person: "person",
			term: "person",
			enterprise: "true",
		},
		{
			baseFun: "自定义图标",
			free: "Tom",
			person: "true",
			term: "false",
			enterprise: "person",
		},
		{
			baseFun: "高级功能",
			free: "",
			person: "",
			term: "",
			enterprise: "",
		},
		{
			baseFun: "通讯录隐藏",
			free: "Tom",
			person: "person",
			term: "person",
			enterprise: "person",
		},
	]

	const cellStyle = (c) => {
		if (c.row.baseFun == "高级功能") {
			return {
				background: "#f5f7fd",
				color: "#333752",
				textAlign: "center",
				fontSize: "20px",
				fontFamily: "Microsoft YaHei, Microsoft YaHei-Bold",
				fontWeight: 700,
				height: "60px",
				lineHeight: "60px",
			}
		}
		return {
			background: "#fff",
			color: "#333752",
			textAlign: "center",
			fontSize: "20px",
			height: "60px",
			lineHeight: "60px",
			fontFamily: "Microsoft YaHei, Microsoft YaHei-Regular",
		}
	}
</script>
<template>
	<div class="voucher-table">
		<el-table
			:data="tableData"
			style="width: 100%"
			:header-row-style="{
				height: '60px',
				lineHeight: '60px',
			}"
			:header-cell-style="{
				background: '#f5f7fd',
				color: '#333752',
				textAlign: 'center',
				fontSize: '20px',
				fontFamily: 'Microsoft YaHei, Microsoft YaHei-Bold',
				fontWeight: 700,
			}"
			:cell-style="cellStyle"
		>
			<el-table-column prop="baseFun" label="基础功能" />
			<el-table-column prop="free" label="个人免费版">
				<template #default="scope">
					<div>
						<el-image v-if="scope.row.free == 'true'" :src="SelectImg" />
						<el-image v-else-if="scope.row.free == 'false'" :src="CloseImg" />
						<label v-else>{{ scope.row.free }}</label>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="person" label="个人专业版">
				<template #default="scope">
					<div>
						<el-image v-if="scope.row.person == 'true'" :src="SelectImg" />
						<el-image v-else-if="scope.row.person == 'false'" :src="CloseImg" />
						<label v-else>{{ scope.row.person }}</label>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="term" label="团队标准版">
				<template #default="scope">
					<div>
						<el-image v-if="scope.row.term == 'true'" :src="SelectImg" />
						<el-image v-else-if="scope.row.term == 'false'" :src="CloseImg" />
						<label v-else>{{ scope.row.term }}</label>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="enterprise" label="企业旗舰版">
				<template #default="scope">
					<div>
						<el-image v-if="scope.row.enterprise == 'true'" :src="SelectImg" />
						<el-image
							v-else-if="scope.row.enterprise == 'false'"
							:src="CloseImg"
						/>
						<label v-else>{{ scope.row.enterprise }}</label>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<style scoped>
	.voucher-table {
		padding-bottom: 54px;
	}
</style>
